import React, {useEffect, useState} from "react";
import {Text} from "react-native-elements";
import {Dimensions, ScrollView, StyleSheet, TouchableHighlight, View} from "react-native";
import {fontSize_15, fontSize_16, fontSize_20} from "./theme";
import {SvgXml} from "react-native-svg";
import {rightSvgXml} from "../libs/svgXml";
import {getChainInfo, initNet} from "./smartxL2Libs/L2_Data";
import {Avatar} from "react-native-elements/dist/avatar/Avatar";
import {useFocusEffect} from "@react-navigation/native";
import {BottomSheet} from "react-native-elements/dist/bottomSheet/BottomSheet";

const {width,height,scale} = Dimensions.get("window");

const L2_AddNet = ({navigation,route}:any) => {
    //创建钱包
    const [createWallet,setCreateWallet] = useState(route?.params?.createWallet)
    const [netListItem,setNetListItem]:any = useState([]);
    //刷新页面
    const [refresh,setRefresh] = useState(true)
    //显示创建钱包或者导入钱包
    const [moreWalletVisible,setMoreWalletVisible] = useState(false)
    //选择的链
    const [selectedChain,setSelectedChain] = useState({chainID:"",providerUrl:""})
    useEffect(()=>{
        navigation.setOptions({
            title:"添加网络"
        })
        const work = async () => {
            let netList = await initNet();
            console.log(netList)
            let netListItemTemp = [];
            for(let i = 0 ; i < netList.length ; i++)
            {
                let providerUrl = (await getChainInfo(netList[i].chainID)).selectedProviderUrl;
                let data = {
                    img : netList[i].img,
                    name:netList[i].name,
                    providerUrl:providerUrl,
                    chainID:netList[i].chainID,
                    onPress:()=>{
                        console.log(providerUrl)
                        if(createWallet === undefined)
                        {
                            setSelectedChain({chainID:netList[i].chainID,providerUrl:providerUrl})
                            setMoreWalletVisible(true)
                            return;
                        }
                        if(!createWallet)
                        {
                            navigation.navigate("L2_ImportWay",{providerUrl:providerUrl,chainID:netList[i].chainID})
                        }
                        else
                        {
                            navigation.navigate("L2_CreateWalletWay",{providerUrl:providerUrl,chainID:netList[i].chainID})
                        }
                    }
                }
                netListItemTemp.push(data)
            }
            console.log(netListItemTemp)
            setNetListItem(netListItemTemp)
        }
        if(!refresh)
        {
            return;
        }
        setRefresh(false)
        work();
    },[refresh])
    //重新聚焦在这个界面
    useFocusEffect(
        React.useCallback(() => {
            console.log("刷新页面")
            setRefresh(true)
            return ()=> {
            };
        }, [])
    );

    return (
        <View style={styles.container}>
            <View style={styles.divider_20}>
                <Text style={styles.mainTitle}>
                    单网络钱包
                </Text>
            </View>
            <ScrollView style={{width: "100%"}} fadingEdgeLength={20} showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
                {
                    netListItem.map((item:any,index:number)=>{
                        return (
                            <TouchableHighlight underlayColor={"grey"} onPress={item.onPress} key={index+"_MineList"}>
                                <View style={styles.pageView}>
                                    <Avatar source={((typeof item.img)==="number")?item.img:{uri:item.img}} rounded={true} activeOpacity={0.7}
                                            containerStyle={{borderWidth: 0 / scale}} size={30}/>
                                    <View style={{flex:1,height:60,marginLeft:10,alignItems:"center",flexDirection:"row",borderBottomColor:"#f5f5f5",borderBottomWidth:1}}>
                                        <Text style={{flex:1,fontSize:fontSize_16,fontWeight:"bold"}}>{item.name}</Text>
                                        <SvgXml xml={rightSvgXml()} width={15} height={15}/>
                                    </View>
                                </View>
                            </TouchableHighlight>
                        )
                    })
                }
                <TouchableHighlight underlayColor={'transparent'} onPress={()=>{
                    navigation.navigate("L2_AddCustomizeNet")
                }}>
                    <View style={styles.addNewNet}>
                        <Text style={styles.addNewNetTitle}>添加自定义网络</Text>

                    </View>
                </TouchableHighlight>
            </ScrollView>
            <BottomSheet
                modalProps={{animationType:"fade"}}
                isVisible={(moreWalletVisible && selectedChain.chainID!=="")}
            >
                <View style={{width:width,height:height-1,backgroundColor: 'rgba(0.5, 0.25, 0, 0.2)'}}>
                    <TouchableHighlight underlayColor={"transparent"} style={{flex:1}} onPress={()=>{
                        setSelectedChain({chainID:"",providerUrl:""})
                        setMoreWalletVisible(false)
                    }}>
                        <View/>
                    </TouchableHighlight>
                    <TouchableHighlight underlayColor={"white"} style={[styles.bottomSheetItem,styles.bottomSheetItemFirst]} onPress={async () => {
                        setSelectedChain({chainID:"",providerUrl:""})
                        setMoreWalletVisible(false)
                        navigation.navigate("L2_CreateWalletWay", {
                            chainID: selectedChain.chainID,
                            providerUrl: selectedChain.providerUrl
                        })
                    }}>
                        <Text style={[styles.bottomSheetItemTitle]}>创建钱包</Text>
                    </TouchableHighlight>
                    <TouchableHighlight underlayColor={"white"} style={[styles.bottomSheetItem]} onPress={async () => {
                        setSelectedChain({chainID:"",providerUrl:""})
                        setMoreWalletVisible(false)
                        navigation.navigate("L2_ImportWay", {
                            providerUrl: selectedChain.providerUrl,
                            chainID: selectedChain.chainID
                        })
                    }}>
                        <Text style={[styles.bottomSheetItemTitle]}>导入钱包</Text>
                    </TouchableHighlight>
                    <View style={styles.divider_10}/>
                    <TouchableHighlight underlayColor={"white"} style={[styles.bottomSheetItem]} onPress={()=>{
                        setSelectedChain({chainID:"",providerUrl:""})
                        setMoreWalletVisible(false)
                    }}>
                        <Text style={[styles.bottomSheetItemTitle]}>取消</Text>
                    </TouchableHighlight>

                </View>
            </BottomSheet>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        alignItems: "center",
        flexDirection: "column",
        backgroundColor: "white"
    },
    divider_20:{
        width:width,
        height:40,
        backgroundColor:"#f6f6f6",
        paddingLeft:10,
        alignItems:"center",
        flexDirection:"row"
    },
    mainTitle:{
        fontSize:fontSize_15,
        color:"#a9aaaf"
    },
    pageView:{
        width:"100%",
        // height:55,
        backgroundColor:"white",
        flexDirection:"row",
        alignItems:"center",
        paddingLeft:10,
        paddingRight:10,
    },
    addNewNet:{
        width:200,
        height:40,
        backgroundColor:"#ebf4ff",
        alignSelf:"center",
        marginTop:20,
        justifyContent:"center",
        alignItems:"center",
        borderRadius:20
    },
    addNewNetTitle:{
        fontSize:fontSize_15,
        color:"#3084fe"
    },
    divider_10:{
        width:width,
        height:5,
        backgroundColor:"#f6f6f6",
        alignItems:"center",
        flexDirection:"row"
    },
    bottomSheetItem:{
        width:width,
        height:50,
        backgroundColor:"white",
        borderBottomWidth:2,
        borderBottomColor:"#f6f6f6",
        alignItems:"center",
        justifyContent:"center"
    },
    bottomSheetItemFirst:{
        borderTopRightRadius:10,
        borderTopLeftRadius:10
    },
    bottomSheetItemTitle:{
        fontSize:fontSize_15,
        color:"#2e81d9"
    },

})
export default L2_AddNet;


